import { useState, useRef } from 'react';
import './comment.css';
import _ from 'lodash';
import { v4 as uuidv4 } from 'uuid';
import dayjs from 'dayjs';

export default function Comment(params) {
  const user = {
    userName: 'jack',
    userId: 123
  }
  const commentList = [
    {
      userName: 'jack',
      id: 1,
      comment: '这是1',
      date: '2023-11-11',
      dianzan: 100,
      userId: 123
    },
    {
      userName: 'jack2',
      id: 2,
      comment: '这是2',
      date: '2021-11-11',
      dianzan: 2000,
      userId: 1232
    },
    {
      userName: 'jack4444',
      id: 4,
      comment: '这是2',
      date: '2025-11-11',
      dianzan: 200,
      userId: 1232
    },
  ]
  const tabs = [
    {
      tabs: '最新',
      type: 'new'
    },
    {
      tabs: '最热',
      type: 'hot'
    },
  ]

  const [ commentListS, setCommentListS ] = useState(_.orderBy(commentList, 'date', 'desc') )
  const [ commentTab, setCommentTab ] = useState('new')
  const handleDelete = (id) => {
    setCommentListS(commentItem => commentItem.filter(item => item.id !== id))
  }
  const handleTabsClick = (type) => {
    setCommentTab(type)
    if(type==='hot') {
      setCommentListS(comment => _.orderBy(commentListS, 'dianzan', 'desc'))
    } else {
      setCommentListS(comment => _.orderBy(commentListS, 'date', 'desc'))
    }
  }

  const [commentInputVal, setCommentInputVal] = useState('')
  const commentInputRef = useRef(null)

  function handleSubmitComment() {
    setCommentListS([
      ...commentListS,
      {
        userName: 'jack',
        id: uuidv4(),
        comment: commentInputVal,
        date: dayjs().format('YYYY-MM-DD'),
        dianzan: 1020,
        userId: 123
      },
    ])
    setCommentInputVal('')
    // setTimeout(() => {
      commentInputRef.current.focus()
    // }, 1000);
  }
  return (
    <div className="comment-c">
      <div className="comment-header">
        <div className="comment-header-l">
          <span className="comment-h-title">评论</span>
          <span>10</span>
        </div>
        <div className="comment-header-tabs" >
          {
            tabs.map(tab => (
              <span className={commentTab === tab.type ? 'active' : ''} key={tab.type} onClick={() => handleTabsClick(tab.type)}>{tab.tabs}</span>
            ))
          }
        </div>
        <div>
          <input
            ref={commentInputRef}
            value={commentInputVal}
            onChange={(e) => setCommentInputVal(e.target.value)}
          />
          <button onClick={handleSubmitComment}>提交</button>
        </div>
      </div>
      <div className="comment-list-c">
        {
          commentListS.map(item => (
            <div key={item.id}>
              <div>
                {item.userName}
              </div>
              <h3>
                {item.comment}
              </h3>
              <div>
                <span>日期:{item.date}</span>
                <span>点赞:{item.dianzan}</span>
              </div>
              {
                item.userId === user.userId 
                && 
                <div className="handle-btn" onClick={() => handleDelete(item.id)}>
                  删除
                </div>
              }
            </div>
          ))
        }
      </div>
    </div>
  )
}